<template>
	<view>
		<button @click="chooseImg" type="primary" size="mini">选择上传图片</button>
		<button @click="uploadImg" type="warn" size="mini">确定上传</button>
		<view class="viewImg">
			<image :src="filePath" mode="scaleToFill"></image>
		</view>
	</view>
</template>

<script>
	import {
		ref,
		toRefs,
		reactive
	} from 'vue';
	export default {
		setup() {
			const filePath = ref("");
			const name = "xxx"

			const chooseImg = () => {
				uni.chooseImage({
					count: 1,
					sourceType: ["album"],
					success(res) {
						console.log(res); //tempFilePaths
						filePath.value = res.tempFilePaths[0]
					}
				})
			}
			const uploadImg = () => {
				uni.showLoading({
					title:"上传中..."
				})
				
				uni.uploadFile({
					url: "https://test.galayun.com/smallprogapi/appcirclepost/PostUniImages",
					filePath: filePath.value,
					name: name,
					success(res) {
						uni.hideLoading();
						// res = JSON.stringify(res)
						console.log(res);
						let path = JSON.parse(res.data);
						console.log(path.data.Data[0]);
						filePath.value = path.data.Data[0];
						uni.showToast({
							title: "上传成功",
							duration: 1000
						})
					}
				})
			}

			return {
				chooseImg,
				uploadImg,
				filePath
			}
		}
	}
</script>

<style scoped>
	.viewImg {
		width: 200rpx;
		height: 200rpx;
	}

	image {
		width: 100%;
		height: 100%;
	}
</style>
